<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        body{
            background-image: url(../static/img/bg/winner_bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .content{
            width: 700px;
            height: 550px;
            /* border: 1px solid red; */
            margin: 0 auto;
            margin-top: 80px;
            background-color: rgba(255, 255, 255, 0.8);
            
        }
        .top{
            width:700px;
            height: 70px;
            font-family: "南构诗韵新隶";
            /* position:; */
            text-align: center;
            position: relative;
            padding-top: 70px;
            /* background-color: red; */
            
            
        }
        .bottom{
            width:700px;
            height: 450px;
            position: relative;
            /* background-color: red; */
            
        }
        .logo{
            /* border: 1px solid red; */
            width: 300px;
            height: 450px;
            position: absolute;
            margin-top: 0;
            
        }
        form{
            margin-left: 70px;
            /* margin-top: 40px; */
            position: relative;
            width: 400px;
            height: 450px;
            padding-top: 50px;
            padding-left: 100px;
        }
        img{
            margin-right: 20px;
            /* margin-top: 30px; */
            /* 这个是相对对其的代码 */
           vertical-align:middle;
        }
        input{
            width: 200px;
            height: 35px;
            font-size: 20px;
            border: 0px;
            /* border-bottom: 1.5px solid #f2cb51; */
            font-family: "黑体";
            /* 这个是图片和input输入框对齐的代码 */
            vertical-align:middle;
            /* 任何时候都不出现输入框的样式 */
            outline: none;
            background-color: rgba(255, 255, 255, 0.6);
            /* color: crimson; */
            border-radius: 10px;
        }
        /* 提交登录 */
        .submit{
            margin-top: 50px;
            font-size: 20px;
            font-family: "华文行楷";
            width: 150px;
            height: 40px;
            margin-left: 100px;
            /* border: 1px solid sandybrown; */
            background-color: cornflowerblue;
            color: aliceblue;
            
        }
        ul li{
            list-style: none;
        }
        .yan{
            margin-top: 10px;
            margin-left: -24px;
        }
        .fen{
            position: relative;
            height: 30px;
            width: 700px;
        }
        
        span{
            font-size: 25px;
            /* padding-right: 25px; */
            margin-left: 20px;
            font-family:"南构诗韵新隶";
            margin-top: 5px;
            width: 80px;
        }
        span:hover{
            border-bottom: 1px dotted black;
            cursor: pointer;
        }
       
            
    
        .fen_up{
            position: relative;
            height: 520px;
            width: 700px;
            /*float: inline-start;*/
            /* display: none; */
        }
        .fen_up_1{
            /* display: none; */
            position: relative;
            height: 520px;
            width: 700px;
            margin-top: -520px;
            margin-left: 496px;
            display: none;
        }
        p{
            color: red;
        }
        #canvas{
            margin-left:-103px;
        }
    </style>
    <script src="../static/js/yan.js"></script>
</head>
<body>
    <div class="content">
       <div class="fen_up" id="fen_up_id">
            <div class="top"><img src="../static/img/logo/blog_hei.png" width="300"></div>
            <div class="bottom">
               
<!--                <div class="logo"><img src="../static/img/logo/blog_hei.png" width="300"></div>-->
                {% from "includes/_formhelpers.html" import render_field %}
                <form action=" " method="POST">
                    {{ form.csrf_token }}
                    <ul>
                        <li>
                    <img src="../static/img/logo/yonghu.png" width="50">{{render_field(form.username)}} <br>
                    </li>
                    <li>
                       
                       <img src="../static/img/logo/mima.png" width="50">{{render_field(form.password)}}<br>
                    </li>
                    <li class="yan">
                        
                        <img src="../static/img/logo/yanzhengma_hei.png" width="75" height="30"  ><input type="text" name="user_yan" placeholder="验证码" id="text"><canvas id="canvas" width="100" height="30" onclick="dj()" style="border: 1px solid #ccc;border-radius: 5px;vertical-align:middle; " title="点击图片切换"></canvas>
                    </li>
                    </ul>
                    
                    <input type="submit" value="登录"  class="submit" onclick="sublim()"><br>
<!--                    <p style="margin-left: 50px; margin-top: 20px;">没有账号?<a href="./user_zhu.html">注册</a>&ensp;&ensp;<a href="#">忘记密码</a></p>-->
                </form>
            </div> 
            
                
            </div>
        </div>
        
    <p style="text-align: center; font-family:华文行楷; padding-bottom: 0px">灰灰博客&copy;版权所有</p>
</body>




</html>